<template>
	<view class="teacher-home">
		<u-list @scrolltolower="scrolltolower" :height="'100%'"
			style="position: relative">
			<view class="teacher-loading" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view>
				<view class="task-list">
					<view class="teacher-item"
						v-for="(item, index) in tableList" :key="index">
						<view class="item-title">
							<text>{{ item.showMonth }}</text>
						</view>
						<view class="teacher-item-list">
							<view class="teacher-item-item"
								v-for="task in item.list" :key="task.examId">
								<view class="item-info" @click="goInfo(task)">
									<view class="info-top">
										<view class="info-top-left">
											<view class="info-top-icon"></view>
											<view class="info-top-title">
												<view class="title">
													{{ task.name }}
												</view>
												<view class="time">
													{{ task.gradeName }}
												</view>
												<view class="time">
													最近更新时间：{{
                                                        task.showUpdateTime
                                                    }}
												</view>
											</view>
										</view>
										<u-icon name="arrow-right"
											style="align-self: flex-start">
										</u-icon>
									</view>
									<view class="class-course">
										<view class="info-course">
											考试科目：{{
                                                task.courseNum
                                            }}科</view>
										<view class="info-class">
											考试班级：{{ task.classNum }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-if="tableList.length < 1">
					<u-empty mode="data" :text="'暂无记录'"> </u-empty>
				</view>
			</view>
		</u-list>
		<u-toast ref="uToast"></u-toast>
		<view class="entry-icon" @click="goAdd"></view>
	</view>
</template>

<script>
	import { openPage } from "@/pages/achievement/api/teacher.js"
	export default {
		props: {
			filterData: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				loading: true,
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tableList: [],
				params: {},
			}
		},
		watch: {
			filterData: {
				handler(val) {
					this.params = val
					this.reset()
					this.getList()
				},
				// immediate: true,
				deep: true,
			},
		},
		methods: {
			reset() {
				this.pageNo = 1
				this.tableList = []
				this.showNoMore = false
			},
			async getList() {

				const {
					scaleActive: scope,
					typeActive: type,
					courseActive: courseId,
					statusActive: publish,
					classId,
				} = this.params
				const data = {
					// scope,
					// type,
					// courseId,
					// classId,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
				}
				if (publish === true || publish === false) {
					data.publish = publish
				}
				if (scope) {
					data.scope = scope
				}
				if (type) {
					data.type = type
				}
				if (courseId) {
					data.courseId = courseId
				}
				if (classId) {
					data.classId = classId
				}
				console.log(data.pageNo)
				try {
					this.loading = true
					const resp = await openPage(data)
					const { data: respData, total } = resp
					if (this.tableList.length > 0) {
						let list = []
						for (let item of this.tableList) {
							const monthList = this.tableList.concat(list).map(
								item => item.month)
							for (let ite of respData?.list) {
								if (item.month == ite.month) {
									// item.list  = item.list.concat(ite.list)
									for (let i of ite.list) {
										item.list.push(i)
									}
								} else {
									if (!monthList.includes(ite.month)) {
										list.push(ite)
									}
								}
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
						list = []
					}  else {
						let list = []
						if (respData?.list) {
							for (const item of respData?.list) {
								list.push(item)
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
					}
					this.total = respData?.total
					this.loading = false
				} catch (e) {
					//TODO handle the exception
					this.loading = false
				}
			},
			scrolltolower() {
				console.log(1)
				this.pageNo += 1
				const page = Math.ceil(this.total / this.pageSize)
				if (this.pageNo > page) {
					if (!this.showNoMore) {
						this.showNoMore = true
						return this.$refs.uToast.show({ message: "没有更多考试了" })
					}
				} else {
					this.getList()
				}
			},
			goInfo(task) {
				//
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/publish?examId=${task.examId}`,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.teacher-home {
		height: 100%;
		overflow-y: scroll;

		.teacher-loading {
			margin-top: 150rpx;
		}

		.task-list {
			position: relative;
			min-height: 100rpx;
			padding: 0 30rpx;

			.type-filter {
				position: absolute;
				right: 24rpx;
				top: 20rpx;
			}
		}

		.item-title {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&>text {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.teacher-item-item {
			box-sizing: border-box;
			height: 252rpx;
			background: #fafafa;
			border-radius: 16rpx;
			padding: 8rpx;
			margin-bottom: 20rpx;

			.item-info {
				box-sizing: border-box;
				height: 236rpx;
				background: linear-gradient(180deg,
						rgba(66, 117, 253, 0.08),
						rgba(66, 117, 253, 0.04));
				border-radius: 16rpx;
				padding: 24rpx;
			}

			.info-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-bottom: 16rpx;
			}

			.info-top-left {
				display: flex;
				justify-content: flex-start;
			}

			.info-top-icon {
				width: 80rpx;
				height: 80rpx;
				background: url("@/pages/achievement/static/img/title-icon.png") 0 0 no-repeat;
				background-size: 100% 100%;
				margin-right: 16rpx;
			}

			.info-top-title {
				.title {
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 4rpx;
				}

				.time {
					height: 36rpx;
					font-size: 26rpx;
					font-weight: 400;
					text-align: left;
					color: #999999;
					line-height: 30rpx;
				}
			}

			.class-course {
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.info-course,
			.info-class {
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #666666;
				line-height: 42rpx;
			}
		}
	}
</style>
